﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../src/utilFn.js"></script>
    <script src="../utilPackage/jquery-1.11.3.min.js"></script>
    <link href="../utilPackage/utilFn.css" rel="stylesheet" />
</head>
<body>
    <script id="sc">
        //*-------------------取得一个随机数 ---//
        
        //例如1：    
        var str1 = g.guid();// 获取随机码
        //默认为36位的GUID码
        console.log(str1);//str1就是格式为 XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX随机数;

        //例如2：    
        var str1 = g.guid(8);// 获取随机码
        //8位64进制的随机数
        console.log(str1);//str1就是格式为 XXXXXXXX随机数;

        //例如3：    
        var str1 = g.guid(8,16);// 获取随机码
        //8位16进制的随机数
        console.log(str1);//str1就是格式为 XXXXXXXX随机数;

        //例如4：    
        var str1 = g.guid(4, 16);// 获取随机码
        //位16进制的随机数
        console.log(str1);//str1就是格式为 XXXXXXXX随机数;

        
     </script>
    <div class="subPage">
        <div id="addDate" class="subPage-part">
            <div class="subPage-part-title">JS样式转换工具 </div>
            <div class="subPage-part-explain" style="padding:0px;padding-bottom:8px;">
                <textarea id="jsInput" class="OutputTextarea"></textarea>
                <input id="change" type="button" value="JS样式转换" />
                <br />
            </div>
            <div class="subPage-part-explain" style="padding:0px;padding-bottom:8px;">
                <textarea id="jsOutput" class="OutputTextarea"></textarea>             
              
            </div>
            <div class="subPage-part-code">
                <pre>
                <code id="code"> </code> 
              </pre>
            </div>
          

        </div>
    </div>
        <script>
            var tranStyle = function (str1) {
                var str2 = str1;
                //关键字
                var keyword = ["this", "function", "typeof", "if", "return", "var", "else", "for", "true", "false"];
                for (var i = 0, a; a = keyword[i++];)
                {
                    var reg = new RegExp(a,'g');
                    var regRes = '<span class="jKey">'+a+'</span>'
                    str2 = str2.replace(reg, regRes);
                }            
                str2 = str2.replace(/console/g, '<span class="jPrt">console</span>');              
                    //说明词    
                var regForMiaoshu = new RegExp('\/\/.*\n', 'g');           
                var miaoshu = str2.match(regForMiaoshu);
                var arry1 = str2.split(regForMiaoshu);       
                var str3 = "";
                for (var i = 0, len = arry1.length; i < len; i++)
                {   
                    if (!miaoshu[i])
                    {
                        miaoshu[i] = '';
                    }
                    str3 += arry1[i] + '<span class="jDes">' + miaoshu[i].replace(/\n/,'') + '</span>\n';
                  
                }              

                str2 = str3; 
                //数字
                var regForMiaoshu = /\d+\s*;|\d+\s*,|\d+\s*\n*]|\d+\s*\n*}|\d+\s*\)/g;
                var miaoshu = str2.match(regForMiaoshu);
                var arry1 = str2.split(regForMiaoshu);
                console.log(arry1);
                console.log(miaoshu);
                var str3 = "";
                for (var i = 0, len = arry1.length; i < len; i++) {
                    var r = [];
                    if (!miaoshu || !miaoshu[i]) {
                        r = ['',''];
                    } else {
                        r[0] = miaoshu[i].substring(0, miaoshu[i].length - 1);
                        r[1] = miaoshu[i].substring(miaoshu[i].length - 1, miaoshu[i].length);
                    }
                    str3 += arry1[i] + '<span class="jNum">' + r[0] + '</span>' + r[1];

                }
                str2 = str3; 
                //Json中数字
                var regForMiaoshu = /\"\d\"/g;
                var miaoshu = str2.match(regForMiaoshu);
                var arry1 = str2.split(regForMiaoshu);
                console.log(arry1);
                console.log(miaoshu);
                var str3 = "";
                for (var i = 0, len = arry1.length; i < len; i++) {
                    var r = "";
                    if (!miaoshu || !miaoshu[i]) {
                        r  = '';
                    } else {
                        r = miaoshu[i]
                    }
                    str3 += arry1[i] + '<span class="jStr">' + r  + '</span>';

                }
                str2 = str3; 
                //Json中字母
                var word = ["id", "name", "state", "aa", "bb", "cc", "dd", "ee", "ff", "gg",];
                for (var i = 0, a; a = word[i++];)
                {
                    var regForMiaoshu = eval( '/\"' + a + '\"/g');
                    var ret = '<span class="jStr">"' + a+ '"</span>';
                    str2 = str2.replace(regForMiaoshu, ret);
                }
                                      
       
                return str2;
            }

            var code = document.getElementById('code');
            var sc = document.getElementById('sc');
            var jsInput = document.getElementById('jsInput');
            var jsOutput = document.getElementById('jsOutput');
            
            var btn = document.getElementById('change');
            code.innerHTML = tranStyle(sc.innerHTML);
            jsOutput.value = tranStyle(sc.innerHTML);

            btn.onclick = function () {
                code.innerHTML = tranStyle(jsInput.value);
                jsOutput.value = tranStyle(sc.innerHTML);
            }

        </script>

</body>
</html>